<template>
  <div class="page-with-toolbar">
    <div class="toolbar">
      <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn">
          <i class="iconfont icon-iframetianjia"></i>
        </button>
      </div>
    </div>
    <div class="container-fluid page-content">
      <div class="row row-check">
        <div class="col-12 col-lg-6 col-check">
          <div class="card">
<!--             <div class="card-header card-header-fluid">
              <h5 class="card-title" style="width:100px">线状图</h5>
              <div class="card-actions dropdown" style="max-width:75px">
                <button
                  class="btn btn-sm"
                  id="navbarDropdown"
                  role="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  <i class="iconfont icon-gengduo"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </div>
            </div> -->
            <div class="card-body">
              <h5 class="card-title">线状图</h5>
              <p
                class="card-text"
              >With supporting text below as a natural lead-in to additional content.</p>
              <demo-line />
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-6 col-check">
          <div class="card">
            <!-- <div class="card-header">Featured</div> -->
            <div class="card-body">
              <h5 class="card-title">柱状图</h5>
              <demo-bar/>
              <p
                class="card-text"
              >With supporting text below as a natural lead-in to additional content.</p>
              <a href="#" data-target="#my-dialog" data-toggle="modal" class="btn btn-primary">对话框</a>
              <div id="my-dialog" class="modal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Modal title</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <p>这是一个模态对话框</p>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-primary">Save changes</button>
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <div class="card">
            <!-- <div class="card-header">功能一二三</div> -->
            <div class="card-body">
              <h5 class="card-title">Special title treatment</h5>
              <p
                class="card-text"
              >With supporting text below as a natural lead-in to additional content.</p>
              <form>
                <div class="form-group">
                  <label class="control-label">abcd</label>
                  <input class="form-control">
                </div>
                <div class="form-group">
                  <select class="form-control">
                    <option>A</option>
                  </select>
                </div>
                <div class="form-group">
                  <label class="custom-control custom-control-inline custom-checkbox">
                    <input
                      type="checkbox"
                      class="custom-control-input"
                      id="remember-chk"
                    >
                    <label class="custom-control-label" for="remember-chk">记住登录</label>
                  </label>
                </div>
                <div class="form-group">
                  <label class="custom-control custom-control-inline custom-radio">
                    <input
                      type="radio"
                      name="gender"
                      class="custom-control-input"
                      id="remember-radio"
                    >
                    <label class="custom-control-label" for="remember-radio">ABC</label>
                  </label>
                  <label class="custom-control custom-control-inline custom-radio">
                    <input
                      type="radio"
                      name="gender"
                      class="custom-control-input"
                      id="remember-radio1"
                    >
                    <label class="custom-control-label" for="remember-radio1">BCD</label>
                  </label>
                </div>
                <div class="form-group">
                  <textarea class="form-control"></textarea>
                </div>
              </form>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DemoBar from './DemoBar';
import DemoLine from './DemoLine';

export default {
  name: "Dashboard",
  components : { DemoBar, DemoLine },
  methods: {
    showDialog() {
      // alert('a')
      $("#my-dialog").modal("show");
    }
  },
  created() {
    // console.log("dashboard created.");
  }
};
</script>
<style lang="scss" scoped>
.page-with-toolbar {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}

.toolbar {
  flex: 0;
  position: relative;
}

.page-content {
  flex: 1;
  height: inherit;
  overflow: auto;
  padding: 15px;
}

.card-header-fluid {
  display: flex;
  flex-direction: row;
  border-bottom: 0;
  padding-bottom: 0;
}

.card-header > .card-title {
  flex: 0;
  margin: 0 auto;
  padding-top: 6px;
}

.card-actions {
  flex: 1;
  text-align: right;
}

.card-actions i {
  font-weight: 600;
  font-size: 16px;
}

.card {
  border: none;
  border-radius: 2px;
  /* box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.2); */
  /* box-shadow: 0 0 0 1px rgba(20, 20, 31, 0.05),
    0 1px 3px 0 rgba(20, 20, 31, 0.15); */
  box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

.row-check {
  padding-left: 15px;
  
}

.col-check {
  margin: 0px;
  padding: 0px;
  padding-right: 15px;
  padding-bottom: 15px;
}

// .col-check .card-body {
//   max-height: 300px;
// }
</style>
